<template>
  <div class="sale_list">
    <el-row :gutter="24">
      <el-col
        :sm="12"
        :md="8"
        class="cursor-pointer h-[12rem]"
        @click="handleOrderBtn"
      >
        <el-card shadow="hover" class="w-full flex justify-center items-center">
          <el-icon :size="100"><Plus /></el-icon>
        </el-card>
      </el-col>
      <el-col :sm="12" :md="8" v-for="item in tableData" :key="item.id">
        <el-card
          class="mb-2 order_item"
          @click="handleDetailBtn(item.id)"
          shadow="hover"
        >
          <template #header>
            <div class="w-full flex justify-between items-center">
              <span class="text-[#909399]">销售单号:{{ item.orderCode }}</span>

              <el-tag type="success" v-if="item.status == 3">
                {{ item.isProcess == 1 ? "已加工" : "已出库" }}
              </el-tag>
              <el-tag type="primary" v-else-if="item.status == 2">
                {{ item.isProcess == 1 ? "待加工" : "待出库" }}
              </el-tag>
              <el-tag type="warning" v-else-if="item.status == 1">
                草稿
              </el-tag>
              <el-tag type="danger" v-else-if="item.status == 4">
                已废弃
              </el-tag>
            </div>
          </template>

          <el-descriptions direction="vertical" :column="2">
            <el-descriptions-item label="客户名称">
              <el-tag type="primary" v-if="item.customerName">
                {{ item.customerName || "" }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="联系方式">
              {{ item.customerTel || "" }}
            </el-descriptions-item>
            <el-descriptions-item label="销售金额(元)">
              <el-text type="primary">
                {{ item.paidAmount ? (item.paidAmount / 100).toFixed(2) : 0 }}
              </el-text>
            </el-descriptions-item>
            <el-descriptions-item label="销售数量">
              {{ item.quantity ? item.quantity : "" }}
            </el-descriptions-item>
            <el-descriptions-item label="制单时间">
              {{ $initTime(item.businessTime * 1000, 2) || "" }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>

    <el-drawer v-model="drawer" destroy-on-close title="订单详情" size="75%">
      <DetailPage :detailId="detailId" :typeId="1" append-to-body />
    </el-drawer>

    <el-drawer
      v-model="order_drawer"
      destroy-on-close
      title="新增销售单"
      size="85%"
    >
      <InsertOrder
        :flag="true"
        :detailForm="detailForm"
        @handleBack="handleBack"
      />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import DetailPage from "../../OrderList/component/DetailPage.vue";
import InsertOrder from "../../OrderList/component/InsertOrder.vue";
import { handleApiResponse } from "@/utils/request.js";
import { GetGlassesStoreOrderList } from "../../../../../wailsjs/go/api/GoodsApi";
onMounted(() => {
  getList();
});

const props = defineProps({
  detailForm: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const tableData = ref([]);

async function getList() {
  handleApiResponse(() =>
    GetGlassesStoreOrderList({
      page: 1,
      pageSize: 1234,
      checkListId: props.detailForm.id,
    })
  ).then((res) => {
    if (res.code == 0) {
      tableData.value = res.data.list || [];
    }
  });
}

// 详情
const drawer = ref(false);
const detailId = ref(null);
const handleDetailBtn = (id) => {
  detailId.value = id;
  drawer.value = true;
};

// 新增销售单
const order_drawer = ref(false);
const handleOrderBtn = () => {
  order_drawer.value = true;
};
const handleBack = (val) => {
  if (val == 1) {
    getList();
  }
  order_drawer.value = false;
};
</script>

<style scoped lang="scss">
.sale_list {
  @apply text-[0.7rem];
  .el-col {
    @apply w-full px-1 mb-2;
    div {
      @apply w-full h-full;
    }
  }
}
.order_item :deep(.el-card__header) {
  @apply px-1 py-1 bg-[#f0f5f9];
}
.order_item :deep(.el-card__body) {
  @apply px-1 py-1;
}
.order_item {
  &:hover {
    @apply cursor-pointer;
  }
}
</style>